<template>
  <div class="app-container">
    <!-- 使用 :src 绑定动态的 URL -->
    <iframe :src="iframeUrl" frameborder="0" />
  </div>
</template>

<script setup>
import { ref, onMounted, onActivated } from 'vue';

defineOptions({
  name: 'DevDoc',
  inheritAttrs: false,
});

// 原始的基础 URL
const baseURL = window.location.origin + '/docs/';
// 创建一个响应式的 ref 来存储最终的 iframe URL
const iframeUrl = ref('');

// 定义一个函数来更新 URL
const refreshIframe = () => {
  // 通过附加时间戳来创建新的 URL，以防止缓存
  iframeUrl.value = baseURL + '?t=' + new Date().getTime();
  console.log('Iframe URL refreshed:', iframeUrl.value);
};

// onMounted 钩子会在组件首次挂载到 DOM 后调用。 [1, 3, 5]
// 这确保了组件第一次显示时加载的是最新内容。
onMounted(() => {
  refreshIframe();
});

// onActivated 钩子会在被 <keep-alive> 缓存的组件被激活时调用。 [2, 4, 7]
// 如果你的应用使用了 <keep-alive> 和页签 (TagsView)，当用户切换回这个组件时，这个钩子会执行。
onActivated(() => {
  refreshIframe();
});
</script>

<style lang="scss" scoped>
.app-container {
  height: calc(100vh - 50px);
}

.hasTagsView {
  .app-container {
    height: calc(100vh - 84px);
  }
}

iframe {
  width: 100%;
  height: 100%;
}
</style>
